Chip

Component Overview

The Chip component in Emvi UI is a compact unit used to represent inputs, selections, filters, or attributes. It combines text, icons, and interactive behavior in a small, readable, and accessible design.

It's intended for interfaces with high visual density, enabling quick actions or simplified navigation without overwhelming the UI. Ideal for dynamic filters, user preferences, selectable labels, or suggestion systems.

Chip Types and Variants

Emvi UI provides multiple chip types, each tailored to a specific interface role. All are available in SM and MD sizes and support icons, counters, and interactive states.

Chip Types:
Input Chips: Represent user-input or selected values (e.g., interests, labels).
Filter Chips: Enable toggling of filters. Can have active/inactive states.
Action Chips: Trigger an action when clicked (e.g., "Add", "Invite").
Suggestion Chips: Automatically proposed to the user based on context or history.
Dismissible Chips: Include a close icon (x) to remove the selection.

States, Interactivity, and Accessibility

Chips in Emvi UI are designed to be fully interactive, accessible, and compatible with both touch and keyboard navigation. Each variant includes the following states:

Default: Neutral appearance with light background and defined border.
Hover: Increases background contrast or highlights the border.
Focus: Displays a visible ring for keyboard navigation.
Active / Selected: Indicates the chip is active or selected.
Disabled: Reduces opacity and disables interaction.
Dismissed (for removable chips): Triggers a close animation or smooth transition.

Each chip supports attributes such as role="button", aria-pressed, aria-selected, or aria-label to meet WCAG standards and improve screen reader compatibility.

Styling, Structure, and Customization

Chips in Emvi UI are built using design tokens that allow precise customization without sacrificing visual consistency. Each chip is composed of:

Central text with adaptive typography.
Semi-transparent or solid background depending on context.
Border and radius defined by the system.
Optional icon (start, end, or both).
Optional close button (for dismissible chips).

Visual variants can easily adapt to light/dark themes and integrate with global styles defined in Figma and Tailwind CSS.

Best Practices

To ensure chips are used effectively and accessibly in any interface, the following guidelines are recommended:

- Limit the number of visible chips to avoid cognitive overload.
- Use chips only when representing concise inputs, filters, or actions.
- Ensure sufficient contrast between background and text for readability.
- Avoid overusing dismissible chips; only offer them when users need control over selections.
- Include icons only if they add meaningful context or functional clarity.

These best practices support a cleaner, more focused, and user-friendly experience.